<script setup lang="ts">
import { onMounted } from "vue";

import EditIcon from "~icons/ep/edit";

// 页面加载时
onMounted(() => {
  //
});
</script>

<template>
  <div class="setting-list">
    <div class="line">
      <div class="info">
        <div class="name">登录密码</div>
        <div class="text setted">
          已设置。密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母。
        </div>
      </div>
      <div class="edit">
        <el-button type="primary" size="small" plain>
          <IconifyIconOffline :icon="EditIcon" />
          <span class="ml-1">修改</span>
        </el-button>
      </div>
    </div>
    <div class="line">
      <div class="info">
        <div class="name">密保问题</div>
        <div class="text">
          您暂未设置密保问题，密保问题可以有效的保护账号的安全。
        </div>
      </div>
      <div class="edit">
        <el-button type="primary" size="small" plain>
          <IconifyIconOffline :icon="EditIcon" />
          <span class="ml-1">设置</span>
        </el-button>
      </div>
    </div>
    <div class="line">
      <div class="info">
        <div class="name">安全手机</div>
        <div class="text setted">已绑定：150******50</div>
      </div>
      <div class="edit">
        <el-button type="primary" size="small" plain>
          <IconifyIconOffline :icon="EditIcon" />
          <span class="ml-1">修改</span>
        </el-button>
      </div>
    </div>
    <div class="line">
      <div class="info">
        <div class="name">安全邮箱</div>
        <div class="text">
          您暂未设置邮箱，绑定邮箱可以用来找回密码、接收通知等。
        </div>
      </div>
      <div class="edit">
        <el-button type="primary" size="small" plain>
          <IconifyIconOffline :icon="EditIcon" />
          <span class="ml-1">修改</span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.setting-list {
  margin-top: 15px;
  font-size: 14px;

  .line {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .info {
      display: flex;
      flex: 1;
      align-items: center;
      padding-right: 85px;

      .name {
        padding: 0 0 15px;
        margin-right: 20px;
      }

      .text {
        flex: 1;
        padding: 0 0 15px;
        color: #aaa;
        border-bottom: 1px solid var(--el-card-border-color);

        &.setted {
          color: var(--el-color-success);
        }
      }
    }

    .edit {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
</style>
